<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Refresh" content="30">
<title>无标题文档</title>
	<style>
		div p{/*后代选择器:用于选取某元素的后代元素*/
			background-color:aqua;
		}
		div>span{/*子元素选择器：只能选择作为某元素的直接/一级子元素的元素*/
			background-color:yellow;
		}
		div+p{/*相邻兄弟选择器：可以选择紧接在另一个元素后的元素，且二者有相同父元素*/
			background-color:blue;
		}
		div~p{/*后续兄弟选择器：选取所有指定元素之后的相邻兄弟元素*/
			background-color:chartreuse;
		}
	</style>
</head>

<body>
	<div>
		<h2>Div内部标题</h2>
		<p>Div内部段落</p>
	</div>
	<p>Div之后的第一个p元素</p>
	<div>
		<span>I live in Ducking.</span>
		<div>
			<span>this is a span</span>
		</div>
	</div>
	<div>
		<span>I live in HIS</span>
	</div>
	<div>
		<p>段落1，在div中。</p>
		<p>段落2，在div中。</p>
	</div>
	<p>段落3，不在div中</p>
	<p>段落3，不在div中</p>
	<div></div>
</body>
</html>
